﻿import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:getx_scaffold/getx_scaffold.dart';
import 'countdown_logic.dart';

/// 运动倒计时页面
class CountdownView extends GetView<CountdownLogic> {
  const CountdownView({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.orange,
      body: SafeArea(
        child: Column(
          children: [
            // 头部区域
            _buildHeader(),
            
            // 倒计时主体
            Expanded(
              child: _buildCountdownBody(),
            ),
            
            // 底部按钮
            _buildBottomButton(),
            SizedBox(height: 40.h),
          ],
        ),
      ),
    );
  }

  /// 构建头部
  Widget _buildHeader() {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 20.w, vertical: 20.h),
      child: Row(
        children: [
          // 返回按钮
          GestureDetector(
            onTap: () => controller.goBack(),
            child: Container(
              width: 40.w,
              height: 40.w,
              decoration: BoxDecoration(
                color: Colors.white.withOpacity(0.2),
                borderRadius: BorderRadius.circular(20.r),
              ),
              child: Icon(
                Icons.close,
                color: Colors.white,
                size: 24.sp,
              ),
            ),
          ),
          
          const Spacer(),
          
          // 运动类型
          Obx(() => Text(
            controller.state.exerciseName.value,
            style: TextStyle(
              color: Colors.white,
              fontSize: 18.sp,
              fontWeight: FontWeight.w600,
            ),
          )),
          
          const Spacer(),
          
          // 占位保持居中
          SizedBox(width: 40.w),
        ],
      ),
    );
  }

  /// 构建倒计时主体
  Widget _buildCountdownBody() {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          // 倒计时数字
          Obx(() => AnimatedSwitcher(
            duration: const Duration(milliseconds: 300),
            transitionBuilder: (Widget child, Animation<double> animation) {
              return ScaleTransition(
                scale: animation,
                child: child,
              );
            },
            child: Text(
              controller.getCountdownText(),
              key: ValueKey(controller.getCountdownText()),
              style: TextStyle(
                color: Colors.white,
                fontSize: 120.sp,
                fontWeight: FontWeight.w300,
              ),
            ),
          )),
          
          SizedBox(height: 20.h),
          
          // 提示文本
          Obx(() => Text(
            controller.getHintText(),
            style: TextStyle(
              color: Colors.white.withOpacity(0.8),
              fontSize: 16.sp,
              fontWeight: FontWeight.w400,
            ),
          )),
          
          SizedBox(height: 40.h),
          
          // 目标信息
          Obx(() => Container(
            padding: EdgeInsets.symmetric(horizontal: 24.w, vertical: 12.h),
            decoration: BoxDecoration(
              color: Colors.white.withOpacity(0.2),
              borderRadius: BorderRadius.circular(20.r),
            ),
            child: Text(
              controller.state.targetInfo.value,
              style: TextStyle(
                color: Colors.white,
                fontSize: 14.sp,
                fontWeight: FontWeight.w500,
              ),
            ),
          )),
        ],
      ),
    );
  }

  /// 构建底部按钮
  Widget _buildBottomButton() {
    return Container(
      margin: EdgeInsets.symmetric(horizontal: 40.w),
      child: Obx(() {
        // 如果倒计时已完成，不显示按钮
        if (controller.state.isCompleted.value) {
          return const SizedBox.shrink();
        }
        
        return SizedBox(
          width: double.infinity,
          child: ElevatedButton(
            onPressed: () => controller.startImmediately(),
            style: ElevatedButton.styleFrom(
              backgroundColor: Colors.white,
              foregroundColor: Colors.orange,
              padding: EdgeInsets.symmetric(vertical: 16.h),
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(25.r),
              ),
              elevation: 0,
            ),
            child: Text(
              '立即开始',
              style: TextStyle(
                fontSize: 16.sp,
                fontWeight: FontWeight.w600,
              ),
            ),
          ),
        );
      }),
    );
  }
}
